<template>
  <div class="list-course-system">
    <div class="course-list">
      <div
        class="course-item"
        v-for="(item, index) in courseSystemList"
        :key="index"
        @click="enterDetails(item)"
        :style="{ height: '290px' }"
      >
        <div class="course-item-img">
          <img :src="item.iconPath" alt="" />
        </div>
        <div class="course-item-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roles: "",
      userInfo: "",
      directionId: "",
      courseSystemList: [],
    };
  },
  created() {
    this.getDirectionId();
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.roles = this.userInfo.roles[0];
  },
  methods: {
    // 获取专业方向
    getDirectionId() {
      this.$axios.get(`/tes/unauthorized/index`).then((res) => {
        if (res.code == 200) {
          this.directionId = res.data.directions[0].id;
          this.getCourseList();
        }
      });
    },

    // 获取课程列表
    getCourseList() {
      this.$axios
        .get(
          `/tes/unauthorized/index-course?directionId=${this.directionId}&coursePageSize=10000`
        )
        .then((res) => {
          if (res.code == 200) {
            this.courseSystemList = res.data.courses[0];
          }
        });
    },

    // 进入详情
    enterDetails(item) {
      this.$router.push("/aiStuding/stuCourseSystem/stuChapterContents");
      localStorage.setItem("courseId", item.id);
      localStorage.setItem("courseName", item.name);
    },
  },
};
</script>

<style lang="scss" scoped>
.list-course-system {
  height: 100%;
  box-sizing: border-box;
  .course-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 50px;
    .course-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
      padding: 20px 20px 25px;
      width: calc(33% - 20px);
      height: 320px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
      border-radius: 10px;
      cursor: pointer;
      box-sizing: border-box;
      &:hover {
        transform: scale(1.02);
        transition: transform 0.3s ease-in-out;
      }
      .course-item-img {
        width: 100%;
        height: 180px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .course-item-name {
        font-weight: bold;
        font-size: 24px;
        color: #4a4966;
      }
      .foot-btns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        .class-num {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #457aff;
          span {
            padding: 5px 10px;
            background: #e8efff;
            border-radius: 11px;
          }
        }
        .add-class {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 14px;
          color: #457aff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>